<!-- Created by henian.xu on 2018/11/8. -->

<template>
    <div class="search-box">
        <Dropdown
            :data="['找商品','找文章']"
            v-model="searchType"/>
        <div
            class="btn"
            @click="onSearch"><i class="f-icon">&#xf002;</i></div>
        <div class="search-input">
            <input
                type="text"
                v-model="keywords"
                placeholder="请输入关键词搜一搜">
        </div>
    </div>
</template>

<script>
import Dropdown from '../dropdown';
export default {
    name: 'SearchBox',
    components: { Dropdown },
    data() {
        return {
            searchType: '找商品',
            keywords: '',
        };
    },
    methods: {
        onSearch() {
            if (!this.keywords) return;
            console.log(this.searchType, this.keywords);
            switch (this.searchType) {
                case '找商品': {
                    window.location.href = `/goods/list?search=${this.keywords}`;
                    break;
                }
                case '找文章': {
                    this.$messageBox.alert('暂不支持');
                    break;
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import '~/assets/style/_index.scss';
.search-box {
    margin-top: (60px - 30)/2;
    height: 32px;
    line-height: 30px;
    // border: 1px solid $color-border;
    border-radius: 4px;
    @include clearfix;

    > .dropdown {
        float: left;
        height: 100%;
        line-height: inherit;
        background-color: $gray2;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;

        border: solid $color-border;
        border-width: 1px 0 1px 1px;
    }

    > .search-input {
        line-height: 30px;
        padding: 0 $padding;
        overflow: hidden;
        border-top: 1px solid $color-border;
        border-bottom: 1px solid $color-border;
        > input {
            outline: 0;
            width: 100%;
        }
    }
    > .btn {
        cursor: pointer;
        float: right;
        width: 40px;
        height: 32px;
        background-color: $color-main;
        border: 1px solid $color-main;
        color: #fff;
        text-align: center;
        border-radius: 0 4px 4px 0;
    }
}
</style>
